<template>
  <div class="app-container">
    <h1>App 根组件</h1>
    <button @click="switchLeft">Left组件</button>
    <button @click="switchRight">Right组件</button>
    <hr />

    <div class="box">
      <p v-color="color">全局自定义指令的使用</p>

      <!-- <Test></Test> -->

      <!-- <Right> -->
      <!-- 默认情况下，在使用组件的时候， 提供的内容都会被填充到名字问default的插槽之中 -->

      <!-- 1. 如果需要把内容填充到指定名称的插槽,需要使用v-slot这个指令 -->
      <!-- 2.v-slotl后面要跟上插槽的名字 -->
      <!-- 3.v-slot：指令不能直接用在元素身上，必须用在template/component标签上 -->
      <!-- 4.template这个标签，它是一个虚拟的标签，只起到包裹性质的作用，但是不会被渲染为任何实质性的html元素 -->
      <!-- <template v-slot:default>
          <p>这是在Right组件的内容区域 声明的p标签</p>
        </template>

        <template #bottom>
          <p>这是Right组件的内容区域 插槽为bottom区域的内容</p>
        </template>

        <template v-slot:defaultContent></template>

        <template #content="obj">
          <p>{{ obj }}</p>
        </template> -->
      <!-- </Right> -->


      <!-- 渲染 Left 组件和 Right 组件 -->
      <!-- component： 组件占位符， is： 指定要渲染组件的名称 -->
      <!-- <keep-alive include="MyLeft">
        <component :is="componentName"></component>
      </keep-alive> -->
    </div>
  </div>
</template>

<script>
import Left from '@/components/Left'
import Right from '@/components/Right'
import Test from '@/components/test'

export default {
  data() {
    return {
      componentName: 'Left',
      color: 'red'
    }
  },
  components: {
    Left,
    Right,
    Test
  },
  methods: {
    switchLeft() {
      this.componentName = 'Left'
    },

    switchRight() {
      this.componentName = 'Right'
    }
  }
}
</script>

<style lang="less">
.app-container {
  padding: 1px 20px 20px;
  background-color: #efefef;
}

.box {
  display: flex;
}
</style>
